<!DOCTYPE html>
<html lang="en">
	<head>
	<title>Mobile Drag And Drop Example</title>
	<link rel="stylesheet" type="text/css" href="css/optional.css">
	<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="script/jquery.mobiledragdrop.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$(".drag").mobiledraganddrop({ targets: ".drop", status: "#status"});
		});
	</script>
	<style type="text/css">
/* Recommended styles */
		.drag, .drag2 {
	float: left;
	width: 200px;
	margin: 10px 2%;
	cursor: move;
	text-align: center;
	text-decoration:none;
	color:#000;
	background:#ffc;
	display:block;
	height: 55px;
	width:160px;
	padding:16px;
	-moz-box-shadow:5px 5px 7px rgba(33, 33, 33, 1);
	-webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
	box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
 -moz-transition:-moz-transform .15s linear;
 -o-transition:-o-transform .15s linear;
 -webkit-transition:-webkit-transform .15s linear;
}
.drop .drag {
	height:160px;
}
.tilt1 {
	-o-transform:rotate(4deg);
	-webkit-transform:rotate(4deg);
	-moz-transform:rotate(4deg);
	position:relative;
	top:5px;
}
.tilt2 {
	-o-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
	position:relative;
	top:-5px;
}
.tilt3 {
	-o-transform:rotate(5deg);
	-webkit-transform:rotate(5deg);
	-moz-transform:rotate(5deg);
	position:relative;
	top:-10px;
}
.tilt4 {
	-webkit-transform:rotate(-6deg);
	-o-transform:rotate(-6deg);
	-moz-transform:rotate(-6deg);
}
 .drop:nth-child(even) {
 -o-transform:rotate(4deg);
 -webkit-transform:rotate(4deg);
 -moz-transform:rotate(4deg);
 position:relative;
 top:5px;
}
.drop .drag:hover, .drop .drag2:hover, .drop .drag:focus, .drop .drag2:focus {
	-moz-box-shadow:10px 10px 7px rgba(0, 0, 0, .7);
	-webkit-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
	box-shadow:10px 10px 7px rgba(0, 0, 0, .7);
	-webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-o-transform: scale(1.25);
	position:relative;
	z-index:5;
}
.selected {
	background-color: Yellow;
	color: Black;
}
.drop {
	background-color: Blue;
	color: White;
	margin: 3px;
	padding: 10px;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	border-radius: 1em;
}
.active {
	background-color: orange;
	cursor: crosshair;
}
</style>
	</head>
	<body>
<div id="header"></div>
<div id="maincontent">
      <div id="how">
    <table width="800" border="1">
          <tr>
        <td>&nbsp;</td>
        <td><div class="drop">
            <div style="clear: both;">
              <p>You can drop items here.</p>
            </div>
          </div></td>
        <td><div class="drop">
            <div style="clear: both;">
              <p>You can drop items here too.</p>
            </div>
          </div></td>
        <td>&nbsp;</td>
      </tr>
          <tr>
        <td>&nbsp;</td>
        <td><div class="drop">
            <div style="clear: both;">
              <p>You can drop items here.</p>
            </div>
          </div></td>
        <td><div class="drop">
            <div style="clear: both;">
              <p>You can drop items here too.</p>
            </div>
          </div></td>
        <td>&nbsp;</td>
      </tr>
        </table>
    <div class="drag" id="drag1">
          <h2>Title #1</h2>
          <p>Text Content #1</p>
        </div>
    <div class="drag" id="drag2">
          <h2>Title #2</h2>
          <p>Text Content #2</p>
        </div>
    <div class="drag" id="drag3">
          <h2>Title #3</h2>
          <p>Text Content #3</p>
        </div>
    <div class="drag" id="drag4">
          <h2>Title #4</h2>
          <p>Text Content #4</p>
        </div>
  </div>
    </div>
</body>
</html>